<!-- Statistics -->
<div id="paymentsStats" class="row">

    <!-- Total Payments -->
    <div class="col-lg-3 col-sm-6">
        <div class="infoBox hoverExpandEffect">
            <div class="icon">
                <span class="fa fa-money"></span>
            </div>
            <div class="content">
                <div class="text">Total Payments</div>
                <div class="value"><span id="paymentsTotal"></span> <span class="smallText">(<strong><span id="paymentsTotalPaid"></span></strong> miners)</span></div>
            </div>
        </div>
    </div>

    <!-- Minimum Payment Threshold -->
    <div class="col-lg-3 col-sm-6">
        <div class="infoBox hoverExpandEffect">
            <div class="icon">
                <span class="fa fa-dollar"></span>
            </div>
            <div class="content">
                <div class="text">Minimum Payout</div>
                <div class="value"><span id="paymentsMinimum"></span></div>
            </div>
        </div>
    </div>

    <!-- Payment Interval -->
    <div class="col-lg-3 col-sm-4">
        <div class="infoBox hoverExpandEffect">
            <div class="icon">
                <span class="fa fa-clock-o"></span>
            </div>
            <div class="content">
                <div class="text">Payment Interval</div>
                <div class="value"><span id="paymentsInterval"></span></div>
            </div>
        </div>
    </div>
    
    <!-- Denomination Unit -->
    <div class="col-lg-3 col-sm-6">
        <div class="infoBox hoverExpandEffect">
            <div class="icon">
                <span class="fa fa-hashtag"></span>
            </div>
            <div class="content">
                <div class="text">Denomination Unit</div>
                <div class="value"><span id="paymentsDenomination"></span></div>
            </div>
        </div>
    </div>
    
</div>

<!-- Report -->
<div id="paymentsReport" class="table-responsive">
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th class="col1">Time Sent</th>
            <th class="col2">Transaction Hash</th>
            <th class="col3">Amount</th>
            <th class="col4">Fee</th>
            <th class="col5">Mixin</th>
            <th class="col6">Payees</th>
        </tr>
        </thead>
        <tbody id="paymentsReport_rows">
    
        </tbody>
    </table>
</div>

<p class="text-center">
    <button type="button" class="btn btn-default" id="loadMorePayments">Load More</button>
</p>

<!-- Javascript -->
<script>
function getTransactionUrl(id) {
    return transactionExplorer.replace('{symbol}', lastStats.config.symbol.toLowerCase()).replace('{id}', id);
}

currentPage = {
    destroy: function(){
        if (xhrGetPayments) xhrGetPayments.abort();
    },
    update: function(){
        updateText('paymentsTotal', lastStats.pool.totalPayments.toString());
        updateText('paymentsTotalPaid', lastStats.pool.totalMinersPaid.toString());
        updateText('paymentsInterval', getReadableTime(lastStats.config.paymentsInterval));
        updateText('paymentsMinimum', getReadableCoins(lastStats.config.minPaymentThreshold, 1));
        updateText('paymentsDenomination', getReadableCoins(lastStats.config.denominationUnit, 3));
        renderPayments(lastStats.pool.payments);
    }
};

var xhrGetPayments;
$('#loadMorePayments').click(function(){
    if (xhrGetPayments) xhrGetPayments.abort();
    xhrGetPayments = $.ajax({
        url: api + '/get_payments',
        data: {
            time: $('#paymentsReport_rows').children().last().data('time')
        },
        dataType: 'json',
        cache: 'false',
        success: function(data){
            renderPayments(data);
        }
    });
});

function getPaymentCells(payment){
    return '<td class="col1">' + formatDate(payment.time) + '</td>' +
           '<td class="col2">' + formatPaymentLink(payment.hash) + '</td>' +
           '<td class="col3">' + getReadableCoins(payment.amount, 4, false) + '</td>' +
           '<td class="col4">' + getReadableCoins(payment.fee, 4, false) + '</td>' +
           '<td class="col5">' + payment.mixin + '</td>' +
           '<td class="col6">' + payment.recipients + '</td>';
}
</script>